const Bgdiv = (props) => {
    //const rgba = props.rgba ? "rgba("+props.rgba+")":"transparent"
    const maskstyle = {
        "position": "absolute",
        "top": 0,
        "left": 0,
        "right": 0,
        "bottom": 0,
        "background": "rgba("+props.rgba+")"
    }    
    console.log(props)
    return <div style={{
        position: "relative",
        background: "url(" + props.img + ") no-repeat",
        width: props.w,
        height: 0,
        paddingBottom: " " + props.h + "%",
        overflow: "hidden",
        backgroundPosition: "center center",
        backgroundRepeat: "no-repeat",
        WebkitBackgroundSize: "cover",
        MozBackgroundSize: "cover",
        backgroundSize: "cover",                        
        WebkitFilter: props.filter,
        filter: props.filter,
    }}>
        <div style={maskstyle}></div>
        <div style={{"position": "relative"}}>
            {props.children}
        </div>
    </div>
};

Bgdiv.defaultProps = {
    w: "100%",
    h: "60",
    img: "",
    filter:"", //grayscale(60%)
    rgba:""
}
export default Bgdiv
